﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="dfpcFirstHighChart.aspx.cs"
    Inherits="plant_bjppFirstHighChart" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题页</title>
    <link href="../css/plantFirstTable.css" rel="Stylesheet" type="text/css" />
    <script type='text/javascript' src='../script/jquery/jquery-1.7.1.min.js'></script>
    <script type="text/javascript" src="../script/js/highcharts.js"></script>
    <script type="text/javascript" src="../script/js/modules/exporting.js"></script>
    <script type="text/javascript" src="../My97DatePicker/WdatePicker.js" charset="gb2312"></script>
    <script type="text/javascript" src="../script/DateOper.js"></script>
    <script type="text/javascript">
        var chart;
        $(document).ready(function () {
            var h = document.documentElement.clientHeight - 180 + "px";
            $("#container").css("height", h);
            $("#txtDate").val(MM_dateFormat(new Date(), 1));
            initChart();
        });
        var initChart = function () {
            var dataJson;
            $.ajax({
                url: "../services/WebService.asmx/GetPlantPowerx",
                contentType: "application/json; charset=utf-8",
                type: "POST",
                dataType: "json",
                data: "{'timeStr':'" + $("#txtDate").val() + "','planCode':'GZWJGS_DFHP_JHFH00','powerCode':'db2_dfpc_ssfh_5min'}",
                beforeSend: function () {
                    //                        Handle the beforeSend event
                },
                success: function (json) {
                    dataJson = $.parseJSON(json.d);
                    SetChartData();
                    SetTableData($("#txtDate").val());
                    //                    GetData();
                },
                error: function (x, e) {
                    alert(x.responseText);
                },
                complete: function () {
                    //                        Handle the complete event
                }
            });

            var SetChartData = function () {
                var chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        type: 'spline'
                    },
                    credits: {
                        enabled: false
                    },
                    title: {
                        text: '大方电厂生产监视图',
                        style: {
                            fontFamily: '"微软雅黑"',
                            fontSize: '14pt'
                        }
                    },
                    subtitle: {
                        enable: false
                    },
                    xAxis: {
                        type: 'datetime',
                        dateTimeLabelFormats: {
                            day: '00:00'
                        },
                        maxZoom: 2 * 3600 * 1000,
                        showFirstLabel: true,
                        showLastLabel: true
                    },
                    yAxis: {
                        title: {
                            text: '负荷（MW）'
                        },
                        labels: {
                            formatter: function () {
                                return this.value;
                            }
                        }
                    },
                    legend: {
                        align: 'left',
                        verticalAlign: 'top',
                        y: 0,
                        x: 20,
                        floating: true,
                        borderWidth: 0
                    },
                    tooltip: {
                        crosshairs: {
                            width: 2,
                            color: 'red'
                        },
                        shared: true,
                        xDateFormat: '<b>时间：%H:%M:%S</b>'
                        //			xDateFormat:'<b>时间：%Y-%m-%d %H:%M:%S</b>'
                    },
                    plotOptions: {
                        spline: {
                            marker: {
                                enabled: false,
                                radius: 4,
                                lineColor: '#666666',
                                lineWidth: 1
                            }
                        }
                    },
                    series: [{
                        name: '今日计划',
                        marker: {
                            symbol: 'circle'
                        },
                        color: 'green',
                        data: dataJson.plan,
                        pointStart: Date.UTC(2012, 3, 26),
                        pointInterval: 300 * 1000 // 5minute
                    }, {
                        name: '今日负荷',
                        marker: {
                            symbol: 'circle'
                        },
                        color: 'red',
                        pointStart: Date.UTC(2012, 3, 26),
                        data: dataJson.today,
                        pointInterval: 300 * 1000 // 5minute
                    }, {
                        name: '昨日负荷',
                        marker: {
                            symbol: 'circle'
                        },
                        color: 'blue',
                        data: dataJson.yesterday,
                        pointStart: Date.UTC(2012, 3, 26),
                        pointInterval: 300 * 1000 // 5minute
                    }],
                    exporting: {
                        enabled: false
                    }
                });
            };
        }
        var SetTableData = function (dateStr) {
            var labelInfo = "";
            $("#tabInfo label").each(function (i) {
                labelInfo += this.id + ";";
            });
            labelInfo = labelInfo.substring(0, labelInfo.length - 1);
            $.post("../services/WebService.asmx/GetReportData", { timeStr: dateStr, codeList: labelInfo }, function (data) {
                var dataArr = data.text.split('|');
                $("#tabInfo label").each(function (i) {
                    var tempData = dataArr[i];
                    if (tempData == "" || tempData == null) {
                        $(this).html("&nbsp;");
                    } else {
                        $(this).html(dataArr[i]);
                    }
                });
            })
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="../services/WebService.asmx" InlineScript="true" />
        </Services>
    </asp:ScriptManager>
    <div style="text-align: left;">
        <fieldset>
            <legend>日期选择</legend>日期：<input id="txtDate" type="text" style="width: 85px; height: 18px;"
                class="Wdate" onfocus="WdatePicker({isShowClear:false,readOnly:true,minDate:'2012-01-01',maxDate:'%y-%M-%d'})" />
            &nbsp;
            <input id="btnSure" type="button" value="确定" onclick="initChart()" />
        </fieldset>
        <fieldset>
            <legend>图表展示</legend>
            <div id="container" style="width: 100%; height: 400px; margin: 0 auto">
            </div>
            <table id="tabInfo" cellspacing="0">
                <tr>
                    <th class="spec" colspan="3">
                        今日
                    </th>
                    <th colspan="5">
                        昨日
                    </th>
                </tr>
                <tr>
                    <td class="left">
                        总负荷
                    </td>
                    <td>
                        积分电量
                    </td>
                    <td>
                        计划电量
                    </td>
                    <td>
                        发电量
                    </td>
                    <td>
                        进煤量
                    </td>
                    <td>
                        耗煤量
                    </td>
                    <td>
                        存煤量
                    </td>
                    <td>
                        原煤耗
                    </td>
                </tr>
                <tr>
                    <td class="left">
                        MW
                    </td>
                    <td>
                        万kW&#8226;h
                    </td>
                    <td>
                        万kW&#8226;h
                    </td>
                    <td>
                        万kW&#8226;h
                    </td>
                    <td>
                        t
                    </td>
                    <td>
                        t
                    </td>
                    <td>
                        t
                    </td>
                    <td>
                        g/kW&#8226;h
                    </td>
                </tr>
                <tr>
                    <td class="left">
                        <label id="pi_dfpc_ssfh_1min">
                            &nbsp;</label>
                    </td>
                    <td>
                        <label id="db2_dfpc_jfdl_d">
                            &nbsp;</label>
                    </td>
                    <td>
                        <label id="db2_dfpc_jhdl_d">
                            &nbsp;</label>
                    </td>
                    <td>
                        <label id="db2_df_day_power_d,-1%d">
                            &nbsp;</label>
                    </td>
                    <td>
                        <label id="db2_df_day_coal_d,-1%d">
                            &nbsp;</label>
                    </td>
                    <td>
                        <label id="db2_df_mon_cusm_coal_d,-1%d">
                            &nbsp;</label>
                    </td>
                    <td>
                        <label id="db2_df_save_coal_num_d,-1%d">
                            &nbsp;</label>
                    </td>
                    <td>
                        <label id="db2_dfpp_ymh_day,-1%d">
                            &nbsp;</label>
                    </td>
                </tr>
            </table>
        </fieldset>
    </div>
    </form>
</body>
</html>